<template>
  <div class="menuview">
    <div class="menumain">
      <main>
        <ul class='menucategory'>
          <li class='menu-item' :key='num' v-for='(item, num) in shop.list' >
             <img v-if='item.icon_url' :src="'https://fuss10.elemecdn.com/' + item.icon_url.substr(0,1) + '/' + item.icon_url.substr(1,2) + '/' + item.icon_url.substr(3) + (item.icon_url.substr(-3) === 'peg'? '.jpeg' : '.png' ) + '?imageMogr/format/webp/thumbnail/18x/'"> 
            <span>{{item.name}}</span>
          </li>
        </ul>
        <section class="container-menu">
          <div class="menu-scroller">
            <dl :key='num' v-for='(item, num) in shop.list' >
              <dt>
                <div class="category-title">
                  <strong class="category-name">{{item.name}}</strong> 
                  <span class="category-description">{{item.description}}</span>
                </div>
                <div class="category-more">
                  <span class="more-icon"></span> 
                  <p transition="popup" class="popup" style="display: none;">
                    <span>{{item.name}}</span> 
                    <span>{{item.description}}</span>
                  </p>
                </div>
              </dt>
              <dd :key='index' v-for='(it, index) in item.foods' >
                <span class="foodimg">
                      <img v-if='it.image_path' :src="'https://fuss10.elemecdn.com/' + it.image_path.substr(0,1) + '/' + it.image_path.substr(1,2) + '/' + it.image_path.substr(3) + (it.image_path.substr(-3) === 'peg'? '.jpeg' : '.png' ) + '?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/'">    
                </span>
                <section class="foodinfo">
                  <header class="foodtitle">
                    <span>{{it.name}}</span>
                  </header>
                  <p v-if='it.description' class="fooddescription">{{it.description}}</p>
                  <p class="foodsales">
                    <span>月售{{it.month_sales}}份</span> 
                    <span>好评率{{it.satisfy_rate}}%</span>
                  </p> 
                  <p class="foodactivity" v-if='it.activity' >
                    <span>限{{it.activity.max_quantity}}份</span>
                  </p>
                  <strong class="foodprice">
                    <span>{{it.specfoods[0].price}}</span> 
                    <!----> 
                    <!----> 
                    <!---->
                  </strong>
                  <div class="cartbutton">
                    <span>
                      <span class="cartbutton-2tycR"><!----> <!---->   
                        <a href="javascript:" role="button" aria-label="添加商品">
                           <svg>
                             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"><svg viewBox="0 0 44 44" id="cart-minus" width="100%" height="100%"><path fill="none" d="M0 0h44v44H0z"></path><path fill-rule="evenodd" d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm10 24h-8v8c0 1.1-.9 2-2 2s-2-.9-2-2v-8h-8c-1.1 0-2-.9-2-2s.9-2 2-2h8v-8c0-1.1.9-2 2-2s2 .9 2 2v8h8c1.1 0 2 .9 2 2s-.9 2-2 2z" clip-rule="evenodd"></path></svg></use>
                           </svg> 
                        </a>
                      </span>
                    </span>
                  </div>
                </section>
              </dd>
            </dl>
          </div>
        </section>
      </main>
      <div>
        <footer class="cartview">
          <div class="zhezhao" style="z-index: 10;"></div>
          <div class="bottomNav" style="z-index: 11;">
            <span role="button" aria-label="购物车" attr-quantity="0" class="bottomNav-icon"></span> 
            <div role="button" aria-label="购物车有商品0件，共0元，配送费&amp;yen;4。" class="bottomNav-middle">
              <p class="bottomNav-sprice">
                <span>¥0</span> <!---->
              </p> 
              <p v-if='shop.obj.piecewise_agent_fee' class="bottomNav-peisong">{{shop.obj.piecewise_agent_fee.tips}}</p>
            </div> 
            <a href="javascript:" role="button" class="bottomNav-a">¥{{shop.obj.float_minimum_order_amount}}起送</a>
          </div>
        </footer>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: 'menuview',
    computed: {
      ...mapState(['shop'])
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../static/hotcss/px2rem';
  .menuview{
    height: px2rem(489);
    .menumain{
      height: 100%;
      box-sizing: border-box;
      padding-bottom: px2rem(48);
      background-color: #fff;
      main{
        display: flex;
        height: px2rem(442);
        .menucategory{
          overflow-y: auto;
          display: inline-block;
          width: px2rem(85);
          height: 100%;
          background-color: #f8f8f8;
          .menu-item{
            position: relative;
            padding: px2rem(17.5) px2rem(7.5);
            border-bottom: 1px solid #ededed;
            color: #666;
            img{
              width: px2rem(9);
              height: px2rem(10);
            }
            span{
              font-size: px2rem(12);
            }
          }
        }
        .container-menu{
          position: relative;
          height: px2rem(442);
          flex: 1;
          display: block;
          .menu-scroller{
            height: 100%;
            overflow-y: auto;
            dl{
              dt{
                position: relative;
                padding: px2rem(7.5) px2rem(10);
                background-color: #f1f1f1;
                .category-title{
                  display: flex;
                  align-items: flex-end;
                  overflow: hidden;
                  .category-name{
                    margin-right: px2rem(5);
                    font-weight: 700;
                    color: #666;
                    flex: none;
                  }
                  .category-description{
                    flex: 1;
                    display: block;
                    color: #999;
                    font-size: px2rem(10);
                    white-space: nowrap;
                    overflow: hidden;
                  }
                }
                .category-more{
                  .more-icon{

                  }
                  .popup{

                  }
                }
              }
              dd{
                position: relative;
                background-color: #fff;
                margin: 0;
                padding: px2rem(15) px2rem(10);
                margin-bottom: 1px;
                display: flex;
                .foodimg{
                  margin-right: 4%;
                  flex: 2;
                  display: block;
                  width: 0;
                  vertical-align: top;
                  img{
                    width: px2rem(51);
                    border-radius: px2rem(5);
                  }
                }
                .foodinfo{
                  position: relative;
                  flex: 8;
                  display: block;
                  padding-bottom: px2rem(25);
                  .foodtitle{
                    font-weight: 700;
                    overflow: hidden;
                    display: flex;
                    justify-content: space-between;
                  }
                  .fooddescription{
                    margin: px2rem(5) 0;
                    font-size: px2rem(10);
                    color: #999;
                  }
                  .foodsales{
                    margin: px2rem(6.5) 0;
                    color: #777;
                    font-size: px2rem(12);
                    line-height: 1;
                  }
                  .foodactivity{
                    font-size: px2rem(12);
                    transform: scale(.8);
                    transform-origin: left;
                    color: #f07373;
                    white-space: nowrap;
                    span{
                      border: 1px solid currentColor;
                      padding: 0 px2rem(2.5);
                    }
                  }
                  .foodprice{
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    font-weight: 700;
                    font-size: px2rem(18);
                    line-height: px2rem(18);
                    color: #f60;
                    &::before{
                      font-weight: 400;
                      content: "\A5";
                      font-size: px2rem(14);
                      display: inline-block;
                    }
                  }
                  .cartbutton{
                    position: absolute;
                    right: 0;
                    bottom: px2rem(-2.5);
                    .cartbutton-2tycR{
                      display: inline-block;
                      white-space: nowrap;
                      a{
                        display: inline-block;
                        padding: px2rem(3.5);
                        vertical-align: middle;
                        text-decoration: none;
                        svg{
                          width: px2rem(20);
                          height: px2rem(20);
                          vertical-align: middle;
                          fill: #3190e8;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .cartview{
        .zhezhao{

        }
        .bottomNav{
          position: fixed;
          right: 0;
          bottom: 0;
          left: 0;
          display: flex;
          align-items: center;
          padding-left: px2rem(79);
          background-color: #3d3d3f;
          height: px2rem(48);
          opacity: .95;
          .bottomNav-icon{
            position: absolute;
            left: px2rem(12);
            bottom: px2rem(7.5);
            width: px2rem(40);
            height: px2rem(40);
            box-sizing: border-box;
            border-radius: 100%;
            border: px2rem(5) solid #444;
            box-shadow: 0 -0.08rem 0.053333rem 0 rgba(0,0,0,.1);
            will-change: transform;
            &::before{
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              // background: url(…48Y2lyY2xlIGN4PSIxMiIgY3k9IjUxIiByPSI0IiBmaWxsPSIjRkZGIi8+PC9nPjwvc3ZnPg==) 50% no-repeat;
              content: "";
            }
          }
          .bottomNav-middle{
            flex: 1;
            display: block;
            .bottomNav-sprice{
              font-size: px2rem(20);
              line-height: normal;
              color: #fff;
            }
            .bottomNav-peisong{
              color: #f5f5f5;
              font-size: px2rem(11);
            }
          }
          .bottomNav-a{
            display: inline-block;
            height: 100%;
            width: px2rem(105);
            background-color: #535356;
            color: #fff;
            text-align: center;
            text-decoration: none;
            font-size: px2rem(17);
            font-weight: 700;
            line-height: px2rem(48);
          }
        }
      }
    }
  }
</style>